<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件 练习</title>
</head>

<body>
    <div id="demo1"></div>
    <div id="demo2"></div>
    <div id="demo3"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        /*
            状态放在哪一个组件
            看数据是某个组件需要 还是某些组件使用(给共同的父组件)
            子组件改变父组件的数据
            子组件调用父组件方法
        */
        class App extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    todos: ['起床', '洗头', '写代码']
                }
            }

            addTodo = (value) => {
                const { todos } = this.state
                todos.unshift(value)
                this.setState({ todos })
            }

            render() {
                const { todos } = this.state
                return (
                    <div>
                        <h1>Simple TODO List</h1>
                        <Add count={todos.length} addTodo={this.addTodo} />
                        <List todos={todos} />
                    </div>
                )
            }
        }


        class Add extends React.Component {
            constructor(props) {
                super(props)
            }
            add = () => {
                const todo = this.centent.value.trim()
                if (!todo) {
                    return
                }
                this.props.addTodo(todo)
                this.centent.value=''
            }

            render() {
                return (
                    <div>
                        <input ref={centent => this.centent = centent} type="text" />
                        <button onClick={this.add}>Add #{this.props.count}</button>
                    </div>
                )
            }
        }

        class List extends React.Component {
            constructor(props) {
                super(props)
            }
            render() {
                const { todos } = this.props
                return (
                    <div>
                        <ul>
                            {
                                todos.map((item, index) => <li key={index}>{item}</li>)
                            }
                        </ul>
                    </div>
                )
            }
        }

        List.propTypes = {
            todos: PropTypes.array.isRequired
        }

        Add.propTypes = {
            count: PropTypes.number.isRequired,
            addTodo: PropTypes.func.isRequired
        }

        ReactDOM.render(<App />, document.getElementById('demo1'))
    </script>
</body>

</html>